<template>
  <div class="form-action" v-if="showActionButtonGroup">
    <div style="width: 100%" :style="{ textAlign: 'right' }">
      <a-form-item>
        <a-space :size="10" style="margin-right: 11px">
          <slot name="resetBefore"></slot>
          <a-button type="default" v-bind="getResetBtnOptions" @click="resetAction" v-if="showResetButton">
            {{ getResetBtnOptions.text }}
          </a-button>
          <slot name="submitBefore"></slot>

          <a-button type="primary" v-bind="getSubmitBtnOptions" @click="submitAction" v-if="showSubmitButton">
            {{ getSubmitBtnOptions.text }}
          </a-button>

          <slot name="advanceBefore"></slot>
          <a-button type="link" size="small" @click="toggleAdvanced" v-if="showAdvancedButton && !hideAdvanceBtn">
            <span :class="['advance-arrow', isAdvanced ? 'advance-arrow-rotate' : '']">
              <down-outlined />
            </span>
            {{ isAdvanced ? '收起' : '展开' }}
          </a-button>
          <slot name="advanceAfter"></slot>
        </a-space>
      </a-form-item>
    </div>
  </div>
</template>
<script lang="ts">
import type { ColEx } from '../types/index'
import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes'
import { defineComponent, computed, PropType } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import { useFormContext } from '../hooks/useFormContext'
import { propTypes } from '@/utils/propTypes'

type ButtonOptions = Partial<ButtonProps> & { text: string }

export default defineComponent({
  name: 'BasicFormAction',
  components: {
    DownOutlined
  },
  props: {
    showActionButtonGroup: propTypes.bool.def(true),
    showResetButton: propTypes.bool.def(true),
    showSubmitButton: propTypes.bool.def(true),
    showAdvancedButton: propTypes.bool.def(true),
    resetButtonOptions: {
      type: Object as PropType<ButtonOptions>,
      default: () => ({})
    },
    submitButtonOptions: {
      type: Object as PropType<ButtonOptions>,
      default: () => ({})
    },
    isAdvanced: propTypes.bool,
    hideAdvanceBtn: propTypes.bool
  },
  emits: ['toggle-advanced'],
  setup(props, { emit }) {
    const getResetBtnOptions = computed((): ButtonOptions => {
      return Object.assign(
        {
          text: '重置'
        },
        props.resetButtonOptions
      )
    })

    const getSubmitBtnOptions = computed(() => {
      return Object.assign(
        {
          text: '查询'
        },
        props.submitButtonOptions
      )
    })

    function toggleAdvanced() {
      emit('toggle-advanced')
    }

    return {
      getResetBtnOptions,
      getSubmitBtnOptions,
      toggleAdvanced,
      ...useFormContext()
    }
  }
})
</script>
<style lang="less" scoped>
.form-action {
  min-width: 260px;
  flex-basis: 260px;
  .advance-arrow {
    font-size: 12px;
    margin-right: 4px;
    transition: all 0.3s ease 0.1s;
    transform-origin: center center;
    &.advance-arrow-rotate {
      transform: rotate(-180deg);
    }
  }
}
</style>
